<template>
  <div class = 'box'>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1" description="输入您的邮箱"></el-step>
      <el-step title="步骤 2" description="输入您的密码"></el-step>
      <el-step title="步骤 3" description="已修改密码？去登录"></el-step>
    </el-steps>

    <div class = "mid">
       <div class = "mid1">
          <el-input v-model="email" placeholder="请输入您的邮箱" size ="small" suffix-icon="el-icon-message"></el-input>
          <el-button style = "margin-top:5%;" @click="confirm">确认</el-button>
       </div>

       <div  class = "mid2">
          <el-input :disabled="disabled" v-model="password" type = "password" placeholder="请输入您的密码" size ="small" suffix-icon="el-icon-edit" @change  ="inputPassword"></el-input>
          <el-input :disabled="disabled" style = "margin-top:5%;" type = "password" v-model="confirmPassword" placeholder="请再输入您的密码" size ="small" suffix-icon="el-icon-edit" ></el-input>
          <el-input :disabled="disabled" style = "margin-top:5%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入code" v-model="textarea"></el-input>
          <el-button :disabled="disabled" style = "margin-top:5%;" @click = "decide">确认</el-button>
       </div>

    </div>

    <div class = "bottom">
       <el-button  @click = "login">登录</el-button>
       <el-button  @click= "next">下一步</el-button>
    </div>
  </div>
  
</template>

<script>
export default {
   name:'forget',

   data(){
       return {
            active:0,
            email:'',
            click:0,
            password: '',
            confirmPassword: '',
            textarea:'',
            disabled:true
       }
   },

   methods: {
      next() {
        this.active += 1;
        this.click = 1;
        if(this.click == 1){
            this.disabled = false;
        }
        this.click = 0;
      },

      inputPassword(){
         this.$message({
             type:'warning',
             message:'请务必确认您两次输入的密码一致'
         })
      },

      decide(){
         if(this.password == this.confirmPassword && this.password != ''){
             this.$axios.post('http://119.91.81.28:1337/auth/reset-password', {
                    code: this.textarea, // code contained in the reset link of step 3.
                    password: this.password,
                    passwordConfirmation: this.confirmPassword,
                })
                .then(response => {
                    
                    console.log("Your user's password has been reset.");
                    console.log(response);
                    this.$message({
                        type:'success',
                        message:'密码重置成功，快去登录吧~'
                    })

                    
                })
                .catch(error => {
                    console.log('An error occurred:', error.response);
                });
         }
      },

      confirm(){
         if(this.email == ''){
            this.$message({
                type:'warning',
                message:'邮箱地址不能为空！！！'
            })
         }else{
             this.$axios.post('http://119.91.81.28:1337/auth/forgot-password', {
                email: this.email, // user's email
            })
            .then(response => {
                console.log('Your user received an email');
                console.log(response);
                this.$message({
                    type:'success',
                    message:'请注意查收您的邮箱.'
                })
            })
            .catch(error => {
                console.log('An error occurred:', error.response);
            });
         }
      },

      login(){
          this.$router.push({
              name:'login'
          })
      }
   }
}
</script>

<style scoped>
  .box{
      width:50%;
      height:60vh;
      padding:1vw;
      border:1px solid #DCDFE6;
      border-radius: 5px;
      box-shadow: 0 0 1vw #909399;
      margin:25vh auto;

   }

   .box .mid{
       width:60%;
       height:10vh;
       display:flex;
       flex-direction: row;
       justify-content: space-between;
   }

   .box .mid .mid1{
       width:40%;
       height:8vh;
   }
   .box .mid .mid2{
       width:40%;
       height:8vh;
       margin-left:15%;
   }
   .box .bottom{
       margin-top:25%;
       margin-left:40%;
   }
</style>